<template>
	<view class="completion-container" :style="{ minHeight: windowHeight + 'px' }">
		<view class="completion-head" :style="{ backgroundImage: `url(${staticFileDomain}/static/image/completion-head-normal.png)` }"></view>
		<view class="completion-body">
			<view class="completion-body-text">穗穗婚恋</view>
			<view class="completion-body-block">
				<view class="completion-body-back">Nickname registration</view>
				<view class="completion-body-front">
					<view class="completion-body-front-cell">
						<view class="completion-body-front-cell-label">昵称：</view>
						<view class="completion-body-front-cell-input">
							<input type="text" v-model="nickName" :placeholder="userInfo.nickName || '请输入昵称'" placeholder-class="placeholder" />
							<view class="nickname-roll"><view class="nickname-roll-btn" @tap.stop="getRandNickname">换一个</view></view>
						</view>
					</view>
					<view class="completion-body-front-cell">
						<view class="completion-body-front-cell-label">所在地：</view>
						<view class="completion-body-front-cell-input" @tap.stop="regionShow = true">{{ regionHandler.regionText }}</view>
					</view>
					<view class="next-btn flex-center-horizontal" @tap.stop="toNextStep">下一步</view>
				</view>
			</view>
		</view>
		<u-select v-model="regionShow" mode="mutil-column-auto" :list="regionList" @confirm="confirmRegionPicker"></u-select>
	</view>
</template>

<script>
export default {
	data() {
		return {
			windowHeight: null,
			nickName: '',
			region: {},
			address: '',
			canRoll: true,
			regionList: [],
			regionShow: false,
			locationSuccess: false
		};
	},
	computed: {
		regionHandler: function() {
			let regionArray = ['', ''];
			let regionText = '请选择所在地';
			let regionCode = ['', ''];
			if (this.region.city && this.region.province && this.region.district) {
				regionText = ` ${this.region.city.region_name} ${this.region.district.region_name}`;
				regionArray = [this.region.province.region_name, this.region.city.region_name, this.region.district.region_name];
			}
			return { regionText, regionCode, regionArray };
		}
	},
	mounted() {
		const systemInfo = uni.getSystemInfoSync();
		this.windowHeight = systemInfo.windowHeight;
		this.refreshUserInfo({ auto: false });

		this.$u.api.getRegionList().then(res => {
			// const regionList = res.data.data;
			// for (let i = 0; i < regionList.length; i++) {
			// 	for (let j = 0; j < regionList[i].children.length; j++) {
			// 		delete regionList[i].children[j].children;
			// 	}
			// }
			this.regionList = res.data.data;
		});
		this.$u.api.updateLocation().then(res => {
			this.region = res.data;
			this.locationSuccess = true;
		});
	},
	methods: {
		getRandNickname() {
			if (this.canRoll) {
				this.canRoll = false;
				this.$u.api
					.getRandNickname()
					.then(res => {
						if (res.data.nickName) {
							this.nickName = res.data.nickName;
						}
						setTimeout(() => {
							this.canRoll = true;
						}, 100);
					})
					.catch(e => {
						this.canRoll = true;
					});
			}
		},
		confirmRegionPicker(e) {
			this.region = { city: { region_name: e[1].label }, province: { region_name: e[0].label }, district: { region_name: e[2].label } };
		},
		toNextStep() {
			if (this.locationSuccess) {
				const form = {
					nickName: this.nickName || this.userInfo.nickName,
					province: this.regionHandler.regionArray[0],
					city: this.regionHandler.regionArray[1],
					district: this.regionHandler.regionArray[2]
				};
				this.$u.api.saveUserBasic(form).then(res => {
					this.$emit('input', !!this.userInfo.authentication ? 2 : 1);
				});
			}
		}
	}
};
</script>

<style></style>
